<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <th:block th:include="include :: header('活动记录')" />
</head>

<!--    样式  -->
<style>
    * {
        padding: 0;
        margin: 0;
    }
    #modal {
        width: 90%;
        height: 90%;
        background-color: white;
        border: 1px black solid;
        position: absolute;
        top: 5%;
        left: 5%;
        display: none;
    }
    .x {
        position: absolute;
        top: 0px;
        right: 10px;
        color: #333;
        font-size: 30px;
    }
    .titleContainer {
        width: 96%;
        height: 10%;
        margin-left: 2%;
        border-bottom: 2px solid #BBBBBB;
    }
    .title {
        position: absolute;
        top: 5%;
        margin-top: -13px;
        font-size: 20px;
        font-weight: bold;
        color: black;
    }
    .bodyContainer {
        width: 96%;
        height: 80%;
        margin-left: 2%;
    }
    .normal {
        width: 30%;
        height: 6%;
        margin-top: 0.5%;
        position: relative;
        display: inline-block;
        margin-right: 4.7%;
    }
    .bodyContainer>div:nth-child(3n) {
        margin-right: 0;
    }
    .buttonContainer {
        width: 96%;
        height: 10%;
        margin-left: 2%;
        text-align: center;
        position: relative;
    }
    .accept {
        width: 100px;
        height: 40px;
        color: white;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 40%;
        margin-top: -20px;
        border: none;
        border-radius: 2px;
        background-color: #03AAF4;
    }
    .refuse {
        width: 100px;
        height: 40px;
        color: white;
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 40%;
        margin-top: -20px;
        border: none;
        border-radius: 2px;
        background-color: #F34809;
    }
    .key {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -9px;
        font-size: 15px;
    }
    .value {
        width: 80%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        border: 1px #BBBBBB solid;
        background-color: #F0F2F5;
    }
    .speciality {
        width: 100%;
        height: 12%;
        position: relative;
        margin-top: 1%;
    }
    .speciality-key {
        width: 6%;
        height: 80%;
        position: absolute;
        left: 0;
        font-size: 15px;
    }
    .speciality-value {
        width: 94%;
        height: 100%;
        position: absolute;
        right: 0;
        border: 1px #BBBBBB solid;
        background-color: #F0F2F5;
    }
    .brief {
        width: 100%;
        height: 25%;
        position: relative;
        margin-top: 0.5%;
    }
    .brief-key {
        width: 6%;
        height: 80%;
        position: absolute;
        margin-top: 0.5%;
        font-size: 15px;
    }
    .brief-value {
        width: 94%;
        height: 100%;
        position: absolute;
        right: 0;
        border: 1px #BBBBBB solid;
        background-color: #F0F2F5;
    }
    .ended {
        display: none;
    }
</style>

<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <!--    搜索块 -->
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <p>活动编号：</p>
                            <input type="text" name="activityID"/>
                        </li>

                        <li>
                            <p>活动名称：</p>
                            <input type="text" name="activityName"/>
                        </li>

                        <li>
                            <p>活动类型：</p>
                            <select name="TypeName">
                                <option value="">所有</option>
                            </select>
                        </li>

                        <li>
                            <p>状态：</p>
                            <select name="activityState" >
                                <option value="">所有</option>
                            </select>
                        </li>

<!--                         招募时间搜索框 -->
                        <li class="select-time">
                            <p>招募时间：</p>
                            <input type="text" class="time-input" id="startTime" style="width: 133px" placeholder="请选择开始时间" name="beginVolunteerDate"/>
                            <span>至</span>
                            <input type="text" class="time-input" id="endTime" style="width: 133px" placeholder="请选择结束时间" name="endVolunteerDate"/>
                        </li>

<!--                        活动时间搜索框-->
                        <li class="select-time">
                            <p>活动时间：</p>
                            <input type="text" class="time-input" id="startTime1" style="width: 133px" placeholder="请选择开始时间" name="beginVolunteerDate"/>
                            <span>至</span>
                            <input type="text" class="time-input" id="endTime1" style="width: 133px" placeholder="请选择结束时间" name="endVolunteerDate"/>
                        </li>

<!--                        搜索按钮-->
                        <li>
                            <a class="btn btn-success btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
<!--                            <a class="btn btn-warning btn-sm" onclick="reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
                        </li>

                    </ul>
                </div>
                <!--    额外搜索条件   -->
                <input name="memberState" value="" id="memberState" style="display: none"/>
            </form>
        </div>



        <!--   功能模块    -->
        <div class="btn-group-sm" id="toolbar" role="group">

        </div>

        <!--    主界面表格 -->
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table">
                <thead>
                <tr>
                    <th data-checkbox="true"></th>
                    <th data-formatter="fm_rowIndex" data-align="center">活动编号</th>
                    <th data-field="activityName">活动名称</th>
                    <th data-field="typeName">活动类别</th>
                    <th data-field="activityContact">联系人</th>
                    <th data-field="enrollBegin">招募时间</th>
                    <th data-field="activityBegin">活动时间</th>
                    <th data-field="activityArea">活动区域</th>
                    <th data-field="serveTime">服务时长</th>
                    <th data-field="isEnroll" data-formatter="fm_is_enroll">是否需要报名</th>
                    <th data-field="activityState" data-formatter="fm_memberState">状态</th>
                    <th data-formatter="fm_commands" data-width="220px" data-align="center">操作</th>
                </tr>
                </thead>
            </table>
        </div>

    </div>
</div>

<th:block th:include="include :: footer" />

<!--    JS  -->
<script th:inline="javascript">
    //  操作
    var showFlag = [[${@permission.hasPermi('vtsp:publish:show')}]];
    var memberStateDatas = [[${@dict.getType('activity_state')}]];
    //  前缀
    var prefix = ctx + "vtsp/publish";

    $(function() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            importTemplateUrl: prefix + "/importTemplate",
            exportUrl: prefix + "/export",
            modalName: "活动信息",
            uniqueId: "activityId"
        };
        $.table.init(options);
    });

    //命令
    function fm_commands(value, row, index){
        var actions = [];
        actions.push('<a class="btn btn-success btn-xs ' + showFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.activityId + '\')">详情</a> ');
        return actions.join('');
    }

    //状态
    function fm_memberState(value, row, index) {
        return $.table.selectDictLabel(memberStateDatas, value);
    }
    //  是否需要报名字典数据
    let is_enroll_dict = [[${@dict.getType('is_enroll')}]];
    //  根据字典的格式转化器
    function fm_is_enroll(value, row ,index) {
        return $.table.selectDictLabel(is_enroll_dict, value);
    }

    //  查询未通过的信息
    function selectFailApproval() {
        let node = document.getElementById("memberState");
        node.setAttribute("value", "3");
        $.table.search();
    }

    function reset() {
        let node = document.getElementById("memberState");
        node.setAttribute("value", "");
        $.form.reset();
    }

    function end(id) {
        var url = prefix + '/end/' + id;
        $.modal.open("活动结项", url);
    }


    /** 弹窗相关事件 */
    //  操作的查看弹窗
    function showModal(id) {
        let modal = document.getElementById("modal");
        modal.style.display = "block";
    }

    function closeModal() {
        let modal = document.getElementById("modal");
        modal.style.display = "none";
    }

</script>
</body>
<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <div class="mt10 pt5">
                &nbsp;	<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
            </div>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>
</html>
